<template>
  <div style="min-height: 800px;margin-left:-180px;">
    <titleBar @showgrafana="getTitleChild" @showdata="getMsgFromChild"></titleBar>
    <section class="main-container white-bg " style="margin-left: -15px;">
      <div class="container" style="width:85%;">
        <!--<hr style="margin-top: 0px; margin-bottom: 0px">-->
        <div class="row">
          <!--<leftNav showdata="123" @showdata="getMsgFromChild"></leftNav>-->
          <div class="col-md-12" style="margin-top: 5px;" v-show="this.showGrafana">
            <iframe v-model="this.href" :src="this.href" style="width:100%;height:auto;" frameborder="0"></iframe>
          </div>
          <div class="col-md-12" style="margin-top: 5px;" v-show="this.search">
            <div class="demo-input-size" style="width: 600px;margin: 0 auto;padding-top: 60px;padding-bottom:45px;">
              <!--<el-input-->
              <!--@keyup.enter.native="submitForm"-->
              <!--placeholder="请输入内容"-->
              <!--v-model="SearchGrafanaKeyWord.Query"-->
              <!--size="50px">-->
              <!--<i slot="prefix" class="el-input__icon el-icon-search"></i>-->
              <!--</el-input>-->
              <el-input
                @keyup.enter.native="initGraph"
                placeholder="请输入内容"
                v-model="SearchGrafanaKeyWord.Query"
                size="50px">
                <i slot="prefix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <div style="margin-top:10px">
                <span style="color: #f0f0f0">是否开启自动刷新</span>
                <el-switch
                  v-model="refresh"
                  :change="beforeDestroy()"
                  active-color="#13ce66"
                  inactive-color="#C0CCDA">
                </el-switch>

                <span style="color: #f0f0f0; margin-left:12px;">获取前</span>
                <el-input-number v-model="SearchGrafanaKeyTimes.Times" controls-position="right" @change="initGraph" :min="1" :max="24" size="mini"></el-input-number>
                <span style="color:#f0f0f0">小时</span>
              </div>

            </div>

            <!--<div v-show="this.search" style="margin-bottom:20px;">-->
            <!--<iframe :src="this.IndexSearchhref" style="width:100%;height:700px;" frameborder="2" scrolling="no" align="middle"></iframe>-->
            <!--</div>-->
            <!--<div class="col-md-12" style="margin-top: 5px;" v-show="this.SearchGrafana">-->
              <!--<iframe v-model="this.Searchhref" :src="this.Searchhref" style="width:100%;height:848px;"-->
                      <!--frameborder="0"></iframe>-->
            <!--</div>-->
          </div>
          <div class="col-md-12">
            <div class="col-md-6" style="margin-bottom: 30px;">
              <div :id="this.idle" style="width:100%;height:350px;float:left;" class="chart"></div>
            </div>
            <div class="col-md-6" style="margin-bottom: 30px;">
              <div :id="this.user" style="width:100%;height:350px;float:right;" class="chart"></div>
            </div>
            <div class="col-md-6" style="margin-bottom: 30px;">
              <div :id="this.mem" style="width:100%;height:350px;float:left;" class="chart"></div>
            </div>
            <div class="col-md-6" style="margin-bottom: 30px;">
              <div :id="this.df" style="width:100%;height:350px;float:right;" class="chart"></div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <el-footer style="height:50px;background-color: rgb(84, 92, 100);">
      <h5 style="font-size: 14px;margin: 0 auto;width: 201px;padding-top:20px;">技术保障组@平台工具线</h5>
    </el-footer>
  </div>
  <!--root div -->
</template>
<style>
  .panel-group {
    max-height: 770px;
    overflow: auto;
    margin-bottom: 0px;
  }

  .leftMenu {
    margin: 10px;
    margin-top: 5px;
  }

  .leftMenu .panel-heading {
    font-size: 14px;
    padding-left: 20px;
    height: 36px;
    line-height: 36px;
    color: white;
    position: relative;
    cursor: pointer;
  }

  /*转成手形图标*/
  .leftMenu .panel-heading span {
    position: absolute;
    right: 10px;
    top: 12px;
  }

  .leftMenu .menu-item-left {
    padding: 2px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
  }

  .leftMenu .menu-item-left:hover {
    background: #C4E3F3;
    border: 1px solid #1E90FF;
  }
</style>
<script type="text/javascript">
  import titleBar from './titleBar'
  import leftNav from './leftNav'
  import { getSearchKeyWord, getGraphData } from '@/api/search_keyword'
  import '@/assets/dashboard/bootstrap/css/bootstrap.css' // global css
  import '@/assets/dashboard/style.css'
  import echarts from 'echarts'
  import { parseTime } from '@/utils'
  export default {
    data() {
      return {
        load_data: false,
        SearchGrafanaKeyWord: {
          Query: ''
        },
        SearchGrafanaKeyTimes: {
          Times: 1
        },
        SearchGrafanaKeyWordQuery: {
          page: 1,
          limit: 10,
          sort: '-Id',
          query: '',
          times: '',
          status: 1
        },
        showGrafana: false,
        SearchGrafana: false,
        IndexSearchhref: 'http://gochart.juanpi.org/show?domain=total',
        search: true,
        href: '',
        Searchhref: '',
        keyword: '',
        chart_idle: null,
        chart_user: null,
        chart_df: null,
        chart_mem: null,
        idle: 'idle',
        mem: 'mem',
        df: 'df',
        user: 'user',
        idleShow: true,
        memShow: true,
        userShow: true,
        dfShow: true,
        Host: '10.205.140.14',
        value8: '',
        refresh: 0,
        count: 0,
        t: null,
        showLine: '',
        refreshStatus: 0
      }
    },
    created() {
      console.log(this.refresh)
    },
    components: {
      titleBar,
      leftNav
    },
    mounted() {
      this.initGraph()
    },
    methods: {
      beforeDestroy: function() {
        console.log(this.refresh)
        if (this.refresh) {
          this.count = 1
          this.t = setInterval(this.timer, 6000)
        } else {
          this.count = 0
          this.refreshStatus = 0
          clearInterval(this.t)
        }
      },
      timer: function() {
        if (this.count > 0) {
          this.count++
          this.refreshStatus = 1
          this.initGraph(this.refreshStatus)
        }
      },
      // 通过子组件监听获取关闭dialog状态
      getMsgFromChild(v) {
        console.log('vvvv===>', v)
        this.SearchGrafanaKeyWord.Query = v
        this.initGraph()
      },
      getTitleChild(v) {
        this.showGrafana = false
        this.search = v
      },
      submitForm() {
        this.SearchGrafanaKeyWordQuery.query = JSON.stringify(this.SearchGrafanaKeyWord)
        this.getList()
      },
      getList() {
        getSearchKeyWord(this.SearchGrafanaKeyWordQuery).then(response => {
          if (response.data.list != null) {
            this.$notify({
              title: '成功',
              message: '检索成功',
              type: 'success',
              duration: 2000
            })
            this.showGrafana = true
            this.search = false
            this.href = response.data.list[0]['Url']
          } else {
            this.$notify({
              title: '失败',
              message: '关键词不存在',
              type: 'warning',
              duration: 2000
            })
          }
          this.Searchhref = response.data.list
        }).catch(err => {
          console.log(err)
        })
      },
      getGraphId(id) {
        if (id === 0) {
          this.chart_idle = echarts.init(document.getElementById(this.idle))
          return this.chart_idle
        } else if (id === 1) {
          this.chart_user = echarts.init(document.getElementById(this.user))
          return this.chart_user
        } else if (id === 2) {
          this.chart_df = echarts.init(document.getElementById(this.df))
          return this.chart_df
        } else {
          this.chart_mem = echarts.init(document.getElementById(this.mem))
          return this.chart_mem
        }
      },
      getGraphIdValue(id) {
        if (id === 0) {
          return 'idle'
        } else if (id === 1) {
          return 'user'
        } else if (id === 2) {
          return 'df'
        } else {
          return 'mem'
        }
      },
      initGraph(status) {
        this.idleShow = false
        this.memShow = false
        this.userShow = false
        this.dfShow = false
        this.Host = this.SearchGrafanaKeyWord
        this.SearchGrafanaKeyWordQuery.query = JSON.stringify(this.SearchGrafanaKeyWord)
        this.SearchGrafanaKeyWordQuery.times = this.SearchGrafanaKeyTimes.Times
        this.SearchGrafanaKeyWordQuery.status = 1
        console.log('iniiniini===>', this.SearchGrafanaKeyWord)
        getGraphData(this.SearchGrafanaKeyWordQuery).then(response => {
          if (response.data !== 'false') {
            for (var v = 0; v < response.data.length; v++) {
              var showLine = this.getGraphIdValue(v) + 'Show'
              if (showLine === 'idleShow') {
                this.idleShow = true
              } else if (showLine === 'memShow') {
                this.memShow = true
              } else if (showLine === 'userShow') {
                this.userShow = true
              } else {
                this.dfShow = true
              }

              const ylist = []
              const xlist = []

              for (var q = 0; q < response.data[v].values.length; q++) {
                xlist.push(parseTime(response.data[v].values[q].timestamp * 1000))
                ylist.push(response.data[v].values[q].value / parseInt(response.data[v].dividend))
              }

              var min = ylist[0]
              for (var ii = 1; ii < response.data[v].values.length; ii++) {
                if (ylist[ii] < min) {
                  min = ylist[ii]
                }
              }
              var max = ylist[0]
              for (var jj = 1; jj < response.data[v].values.length; jj++) {
                if (ylist[jj] > max) {
                  max = ylist[jj]
                }
              }
              min = Math.floor(min)
              max = Math.ceil(max)

              var Ids = this.getGraphId(v)
              console.log('showLine==>', this.idle)
              Ids.setOption({
                backgroundColor: '#21202D',
                title: {
                  text: response.data[v].title,
                  subtext: response.data[v].counter,
                  textStyle: {
                    color: '#C0C0C0'
                  }
                },
                tooltip: {
                  trigger: 'axis',
                  axisPointer: {
                    type: 'cross'
                  }
                },
                xAxis: {
                  type: 'category',
                  axisLine: {
                    lineStyle: {
                      color: '#409EFF'
                    }
                  },
                  boundaryGap: false,
                  data: xlist
                },
                yAxis: {
                  min: min,
                  max: max,
                  type: 'value',
                  axisLine: {
                    lineStyle: {
                      color: '#409EFF'
                    }
                  },
                  axisLabel: {
                    formatter: '{value}' + response.data[v].axislabel
                  },
                  axisPointer: {
                    snap: true
                  }
                },
                visualMap: {
                  show: false,
                  dimension: 0
                },
                series: [
                  {
                    name: response.data[v].counter,
                    type: 'line',
                    smooth: true,
                    data: ylist,
                    areaStyle: {
                      normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                          offset: 0,
                          color: '#8ec6ad'
                        }, {
                          offset: 1,
                          color: '#ffe'
                        }])
                      }
                    },
                    markLine: {
                      symbol: ['none', 'none'],
                      label: {
                        normal: { show: false }
                      },
                      lineStyle: {
                        normal: {
                          color: '#ffe',
                          width: 2
                        }
                      },
                      data: [{
                        yAxis: response.data[v].avg
                      }]
                    }
                  }
                ]
              })
            }
          } else {
            if (status === 0) {
              this.$notify({
                title: '失败',
                message: '检索失败，IP或域名不存在',
                type: 'warning',
                duration: 2000
              })
            }
          }
        })
      }
    }
  }
</script>
